<template>
  <view class="container">

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 公司Logo区域 -->
      <view class="logo-section">
        <image src="/static/logo.png" class="company-logo" mode="aspectFit" />
        <text class="company-name">盐城半导体集成技术研究院</text>
      </view>

      <!-- 详细介绍 -->
      <view class="detail-section">
        <view class="section-title">
          <text>详细介绍</text>
        </view>
        <view class="detail-content">
          <text class="detail-text">
            盐城半导体集成技术研究院(江苏瀚微半导体科技有限责任公司)坐落在江苏省盐城市,是由盐城高新区与中科院半导体所原副所长杨富华教授创新团队开展产学研全面合作,于2021年12月成立的半导体产业技术创新与成果转化平台。
          </text>
          <text class="detail-text">
            研究院以建成半导体产业技术创新与成果转化平台为目标，结合地区发展需求，立足为盐城高新区发展汇聚、培养一批未来信息所需的高端人才，服务盐城高新区现有企业和潜在落户企业，为企业提供技术支持、科技咨询、成果转化等服务。
          </text>
        </view>
      </view>
      <!-- 公司环境 -->
      <view class="envir-section">
        <view class="section-title">
          <text>公司环境</text>
        </view>
        <view class="envir-content">
          <view class="envir-item" v-for="(item, index) in envirImgs" :key="index">
            <image :src="getImgUrl(item.src)" class="envir-img" mode="widthFix" />
          </view>
        </view>
      </view>
      <!-- 资质证书 -->
      <view class="cert-section">
        <view class="section-title">
          <text>资质证书</text>
        </view>
        <view class="cert-content">
          <view class="envir-item" v-for="(item, index) in certImgs" :key="index">
            <image :src="getImgUrl(item.src)" class="envir-img" mode="widthFix" />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack()
}
const  getImgUrl = (imgUrl) => {
  const env = import.meta.env.VITE_APP_RESOURCES_URL;
  return env + imgUrl
}

const envirImgs = [
  {
    src: '/2025/09/a0f6c5f792d942fc9863f21f72859e32.png',
    title: '环境1'
  },
  {
    src: '/2025/09/df6b77ebadeb4a1faf3dc676b1b749b5.png',
    title: '环境2'
  },
]

const certImgs = [
  {
    src: '/2025/09/f0c8c409512f4ae79f09aea8185bdc7f.png',
    title: '证书1'
  },
  {
    src: '/2025/09/0f484471bd044ce0911444e2f32bfd74.png',
    title: '证书2'
  },
  {
    src: '/2025/09/e19e7a0db3934826b89361efa007e60c.png',
    title: '证书3'
  },
  {
    src: '/2025/09/a87b74ece97c427fad8ad1c0c615dc35.png',
    title: '证书4'
  },
]

onLoad(() => {
  // 设置页面标题
  uni.setNavigationBarTitle({
    title: '公司简介'
  })
})
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: #f7f7f7;
}

.envir-img {
  background: #fff;
  width: 100%;
}

.content {
  padding-bottom: 30rpx;
}

.logo-section {
  background: #fff;
  padding: 60rpx 40rpx;
  text-align: center;
  margin-bottom: 20rpx;

  .company-logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }

  .company-name {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .company-subname {
    display: block;
    font-size: 28rpx;
    color: #666;
  }
}

.info-section,
.detail-section,
.advantage-section,
.service-section {
  background: #fff;
  margin: 20rpx 0;
  padding: 40rpx 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 20rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4rpx;
    height: 28rpx;
    background: #0f3679;
  }
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .info-label {
    font-size: 28rpx;
    color: #999;
    min-width: 160rpx;
    flex-shrink: 0;
  }

  .info-value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
    line-height: 1.5;
  }
}

.detail-content {
  .detail-text {
    display: block;
    font-size: 28rpx;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20rpx;
    text-align: justify;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.advantage-list {
  .advantage-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .advantage-text {
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;

    .service-text {
      margin-top: 15rpx;
      font-size: 26rpx;
      color: #333;
    }
  }
}
</style>
